<template>
  <div class="main">
    <div class="top">
      <div class="top_1">品牌排行榜-9月29</div>
      <div class="top_2">
        快速发现今日在抖音热推的品牌，分析品牌热度趋势、品牌视频、品牌商品、在售播主等
      </div>
    </div>
    <div class="middle">
      <div class="search">
        <div class="block">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="cate">
          <i class="el-icon-menu"></i>
          <span>类目</span>
        </div>
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search">搜索类目</el-button>
  </el-input>
      </div>
      <div class="tab_tit">
        TA们都在搜：
      </div>
    </div>
    <div class="table">
      <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column

      prop="date"
      label="排名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="province"
      label="品牌"
      width="220">
    </el-table-column>
    <el-table-column
      prop="name"
      label="品牌商品"
      width="170">
    </el-table-column>
    <el-table-column
      prop="city"
      label="近30天销量"
      width="150"
      style="color:red"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="抖音访客"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="类目视频"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="视频点赞"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="视频评论"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="视频分享"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address1"
      label="在售博主"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="博主粉丝"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      value1:'',
      input3:'',
      tableData: [{
          date: '1',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '2999',
          address1: '李佳佳',
          zip: 200333
        }, {
          date: '2',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '643',
          address1: '李佳佳',
          zip: 200333
        }, {
          date: '3',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '782',
          address1: '李佳佳',
          zip: 200333
        }, {
          date: '4',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '881',
          address1: '李佳佳',
          zip: 200333
        }, {
          date: '5',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '3469',
          address1: '李佳佳',
          zip: 200333
        }, {
          date: '6',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '9621',
          address1: '李佳佳',
          zip: 200333
        }, {
          date: '7',
          name: '良品铺子',
          province: '食品零食',
          city: '2867',
          address: '1399',
          address1: '李佳佳',
          zip: 200333
        }],
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 1px;
}
.top {
  width: 100%;
  height: 60px;
  background-image: linear-gradient(45deg, #ecf5ff, #506eff);
  padding: 20px;
  text-align: left;
  margin-bottom: 20px;
  .top_1 {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 20px;
  }
}
.middle {
  height: 92px;
  width: 60%;
  background-color: #fff;
  .search {
    width: 100%;
    height: 52px;
    padding-left: 20px;
    border: 1px solid #dcdfe6;
    border-right: 0;
    border-radius: 5px;
    display: flex;
    :deep(.el-input__inner){
      height: 52px;
    }
  }

  .tab_tit{
    margin-top: 10px;
    text-align: left;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }
  .cate{
    width: 50px;
    height: 52px;
    padding: 1px;
    margin: 1px;
    display: flex;
    align-items: center;
    span{
      width: 40px;
    }
  }
  :deep(.el-input-group__append){
    background-image: linear-gradient(45deg,#8351fe,#66b1ff);
    color: #fff;
    border: 1px solid #506eff;
  }
}
.table{
  color: black;
  :deep(.el-table thead){
    color: black;
  }
}
</style>